<template>
  <div>
    <tb-report
      saltId="generalContractNo"
      :fieldMapToTime="fieldMapToTime"
      :schemas="schemas"
      :columns="columns"
      :apiUrl="apiUrl"
      :tableData="tableData"
      :getData="getData"
    ></tb-report>
  </div>
</template>

<script>
import {h} from "vue";
import TbReport from "@/components/tb-report/index.vue";
import dayjs from "dayjs";
import axios from "axios";
import { getQueryString } from "util/index.js";

export default {
  name: "App",
  components: { TbReport },
  data() {
    return {
      title: "首页",
      apiUrl: "/scm/api/v1/scmEpcDispatchPlanHead/dispatchPlanStatistics",
      urgencyDegreeOptions: [],
      fieldMapToTime: [
        [
          "updateTimeDate",
          ["updateTimeStart", "updateTimeEnd"],
          "YYYY-MM-DD HH:mm:ss",
        ],
      ],
      schemas: [
        {
          label: "总包合同号",
          field: "generalContractNo",
          component: "Input",
          placeholder: "总包合同号",
          required: false,
          colProps: {},
        },
        {
          label: "紧急程度",
          field: "urgencyDegree",
          component: "Select",
          placeholder: "紧急程度",
          required: false,
          componentProps: ({ form }) => {
            return {
              options: this.urgencyDegreeOptions,
            };
          },
          colProps: {},
        },
        {
          label: "发运计划状态",
          field: "dispatchStatus",
          component: "Checkbox",
          placeholder: "多选",
          required: false,
          componentProps:{
            options: [
                { text: "未提交", value: "1" },
                { text: "已提交", value: "2" },
                { text: "已确认", value: "3" },
                { text: "已退回", value: "4" },
                { text: "已作废", value: "5" },
              ]
          },
          colProps: {},
        },
        {
          label: "更新时间",
          field: "updateTimeDate",
          component: "Calendar",
          placeholder: "更新时间",
          required: false,
          colProps: {},
           componentProps: ({ form }) => {
            return {
               type:"range",
               allowSameDay:true
            }
          }
        },
        {
          label: "预计到港时间",
          field: "etapld",
          component: "Calendar",
          placeholder: "预计到港时间",
          required: false,
          colProps: {},
           componentProps: ({ form }) => {
            return {
              valueFormat: 'YYYY-MM',
            }
          }
        },
      ],
      columns: [
        {
          type: "seq",
          key: "seq",
          width: 70,
          title: "序号",
          treeNode: true,
          fixed: "left",
          align: "center",
        },
        {
          title: "总包合同号",
          field: "generalContractNo",
          key: "generalContractNo",
          width: 150,
          align: "center",
          slots: {
            default: ({ row }) => {
              return row.generalContractNo;
            },
          },
        },
        {
          title: "发运计划",
          field: "dispatchPlan",
          key: "dispatchPlan",
          width: 120,
          align: "center",
        },
        {
          title: "发运计划状态",
          field: "dispatchStatus",
          key: "dispatchStatus",
          width: 120,
          align: "center",
        },
        {
          title: "项目名称",
          field: "projectName",
          key: "projectName",
          width: 120,
          align: "center",
        },
        {
          title: "项目编号",
          field: "projectNumber",
          key: "projectNumber",
          width: 120,
          align: "center",
        },
        {
          title: "甲方单位名称",
          field: "partyAEtpsName",
          key: "partyAEtpsName",
          width: 120,
          align: "center",
        },
        {
          title: "乙方单位名称",
          field: "partyBEtpsName",
          key: "partyBEtpsName",
          width: 120,
          align: "center",
        },
        {
          title: "更新时间",
          field: "updateTime",
          key: "updateTime",
          width: 120,
          align: "center",
          slots: {
            default: ({ row }) => {
              return row.updateTime
                ? dayjs(row.updateTime).format("YYYY-MM-DD")
                : "---";
            },
          },
        },
        {
          title: "预配船次",
          field: "preplanVoyage",
          key: "preplanVoyage",
          width: 120,
          align: "center",
        },
        {
          title: "园区",
          field: "park",
          key: "park",
          width: 120,
          align: "center",
        },
        {
          title: "子项号",
          field: "subItemNo",
          key: "subItemNo",
          width: 120,
          align: "center",
        },
        {
          title: "合同品名",
          field: "contractGoodsName",
          key: "contractGoodsName",
          width: 120,
          align: "center",
        },
        {
          title: "紧急程度",
          field: "urgencyDegree",
          key: "urgencyDegree",
          width: 120,
          align: "center",
        },
        {
          title: "国内港口",
          field: "domesticPort",
          key: "domesticPort",
          width: 120,
          align: "center",
        },
        {
          title: "预计到港时间",
          field: "etapld",
          key: "etapld",
          width: 120,
          align: "center",
        },
        {
          title: "预估体积m³",
          field: "estimatedVolume",
          key: "estimatedVolume",
          width: 120,
          align: "center",
        },
        {
          title: "预估重量T",
          field: "estimatedWeight",
          key: "estimatedWeight",
          width: 120,
          align: "center",
        },
        {
          title: "供货商",
          field: "supplier",
          key: "supplier",
          width: 120,
          align: "center",
        },
        {
          title: "负责人",
          field: "leaderName",
          key: "leaderName",
          width: 120,
          align: "center",
        },
        {
          title: "类别",
          field: "type",
          key: "type",
          width: 120,
          align: "center",
        },
        {
          title: "备注",
          field: "remark",
          key: "remark",
          width: 120,
          align: "center",
        },
      ],
      tableData: [],
    };
  },
  methods: {
    getAllOptions() {
      let _this = this;

      axios({
        method: "get",
        headers: {
          Authorization: "Bearer " + getQueryString("token"),
        },
        params: {},
        url: "/scm/api/v1/scmBasicDataDictionary/listByTypeCode/urgency_Degree",
      }).then((response) => {
        console.log("response", response.data.data);
        if (response.data.code === 0) {
          _this.urgencyDegreeOptions = response.data.data.map((item) => {
            return {
              text: item.paramName,
              value: item.paramCode,
            };
          });
        }
      });
    },
    getData(data, init) {
      if (init == "init") {
        this.tableData = data;
        return false;
      }
      if (this.tableData.length == 0) {
        this.tableData = data;
      } else {
        this.tableData = [...this.tableData, ...data];
      }
    },
  },
  mounted() {
    setTimeout(() => {
      this.getAllOptions();
    }, 1000);
  },
};
</script>

<style>
</style>
